<template>
    <div class="diskInfoWrap">
        <el-form
            :model="searchData"
            label-width="120px"
            :class="dateWidth ? 'gt1200':'lt1200'"
        >
            <el-row>
                <el-col :span="5">
                    <el-form-item label="红字确认单编号：">
                        <el-input
                            v-model="searchData.hzfpxxqrdbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="5">
                    <el-form-item label="红字确认单状态：" label-width="120px">
                        <el-select
                            v-model="searchData.hzqrxxztdm"
                            placeholder="请选择"
                        >
                            <el-option label="无需确认" value="01"></el-option>
                            <el-option label="销方录入待购方确认" value="02"></el-option>
                            <el-option label="购方录入待销方确认" value="03"></el-option>
                            <el-option label="购销双方已确认" value="04"></el-option>
                            <el-option label="作废（销方录入购方否认）" value="05"></el-option>
                            <el-option label="作废（购方录入销方否认）" value="06"></el-option>
                            <el-option label="作废（超72小时未确认）" value="07"></el-option>
                            <el-option label="发起方撤销" value="08"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="红字确认单申请日期：" label-width="140px">
                                <el-date-picker
                                    v-model="redConfirmApplyDate"
                                    type="datetimerange"
                                    align="right"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']">
                                </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">
                    <el-form-item label="蓝字发票号码：">
                        <el-input
                            v-model="searchData.lzfphm"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="红冲原因：" label-width="120px">
                        <el-select
                            v-model="searchData.chyydm"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in [
                                    { label: '开票有误', value: '01' },
                                    { label: '销货退回', value: '02' },
                                    { label: '服务中止', value: '03' },
                                    { label: '销售折让', value: '04' },
                                ]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                        
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="蓝字发票开票日期：" label-width="140px">
                        <el-date-picker
                            v-model="BlueInvoiceDate"
                            type="datetimerange"
                            align="right"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <div  style="float: right;margin-top: 4px;">
                        <el-button type="primary" size="small" @click="getList">
                            查询
                        </el-button>
                        <el-button type="primary" size="small" @click="onResize">
                            重置
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <el-button
                    type="primary"
                    size="small"
                    @click="uploadSelected"
                    style="margin: 4px 0"
                >
                    新增
                </el-button>
                <el-button type="primary" @click="revokeApply" size="small">
                    撤销
                </el-button>


        <tableList
            border
            ref="tableRef"
            :heightMin="165"
            :keySet="keySet"
            :autoHeight="true"
            :tableData="listDetails2"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"

            :radioSelect="true"
            @radioHandleCurrentChange="radioHandleCurrentChange"
        >
                <template #hzqrxxztdm="{ row }">
                    <div >
                        <!-- {{ row.hzqrxxztdm == '02' ? '销方录入待购方确认': '购方录入待销方确认'}} -->
                        {{ hzqrxxztdmMap[row.hzqrxxztdm] || ' ' }}
                    </div>
                </template>
                <template #chyydm="{ row }">
              <div >
                {{ chyyMap[row.chyydm] }}
              </div>
          </template>
        </tableList>

        <addRedConfigDialog
            ref="addRedConfigDialogRef"
            v-if="addRedConfigDialogShow"
            @redVoiceDailogCb="redVoiceDailogCb"
        ></addRedConfigDialog>


    </div>
</template>
  
  <script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import { throttle } from 'lodash'
import { pageApply } from '@/api/vmsHzqrdApply.js'
import { revokeApply,checkInfoAndRisk } from '@/api/vmsHzqrdApply.js'
import addRedConfigDialog from './components/addRedConfigDialog.vue'


export default {
    name: 'invoicedInfo',
    mixins: [mixinTable],
    data() {
        return {
            hzqrxxztdmMap:{ //红字确认信息状态代码
                '01': '无需确认',
                '02': '销方录入待购方确认',
                '03': '购方录入待销方确认',
                '04': '购销双方已确认',
                '05': '作废（销方录入购方否认）',
                '06': '作废（购方录入销方否认）',
                '07': '作废（超72小时未确认）',
                '08': '作废（发起方撤销）'
            },
            addRedConfigDialogShow:false,
            value9: false,
            listDetails2: [],
            selectRow: null,
            detailTableData: [],

            chyyMap:{
                "01":"开票有误",
                "02":"销货退回",
                "03":"服务中止",
                "04":"销售折让",
            },

            redConfirmApplyDate:['',''],
            BlueInvoiceDate:['',''],
            searchData:{
                chyydm:'',
                hzfpxxqrdbh:'',
                hzqrdsqrqq:'',
                hzqrdsqrqz:'',
                hzqrxxztdm:'',
                lzfphm:'',
                lzfpkprqq:'',
                lzfpkprqz:'',

            },
            keySet: [
                {
                    label: '红字确认单编号',
                    englishName: 'hzfpxxqrdbh',
                    width: 120,
                },
                {
                    label: '红字确认单状态',
                    englishName: 'hzqrxxztdm',
                    width: 180,
                    isSlot: true,
                    slotName: 'hzqrxxztdm',
                },
                {
                    label: '红冲原因',
                    englishName: 'gmfnsrsbh',
                    width: 180,
                    isSlot: true,
                  slotName: 'chyydm',
                },
                {
                    label: '红字确认单申请日期',
                    englishName: 'creatTime',
                    width: 200,
                },
                {
                    label: '红字确认单确认日期',
                    englishName: 'lrrq',
                    width: 'labelWidth',
                },
                {
                    label: '蓝字发票号码',
                    englishName: 'lzfphm',
                    width: '220',
                },
                {
                    label: '蓝字发票开具日期',
                    englishName: 'lzkprq',
                    width: 150,
                },
                {
                    label: '蓝字合计金额',
                    englishName: 'lzhjje',
                    width: 'labelWidth',
                },
                {
                    label: '蓝字合计税额',
                    englishName: 'lzhjse',
                    width: 'labelWidth',
                },

                {
                    label: '冲销金额',
                    englishName: 'hzcxje',
                    width: 'labelWidth',
                },
                {
                    label: '冲销税额',
                    englishName: 'hzcxse',
                    width: 'labelWidth',
                },
                {
                    label: '操作人',
                    englishName: 'updateBy',
                    width: 'labelWidth',
                },
                {
                    label: '操作时间',
                    englishName: 'updateTime',
                    width: 150,
                },
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        radioHandleCurrentChange(row){
            this.selectRow = row;
        },
        onResize() {
            this.redConfirmApplyDate = ['','']
            this.BlueInvoiceDate = ['','']
            this.searchData = {
                chyydm:'',
                hzfpxxqrdbh:'',
                hzqrdsqrqq:'',
                hzqrdsqrqz:'',
                hzqrxxztdm:'',
                lzfphm:'',
                lzfpkprqq:'',
                lzfpkprqz:'',

            },
            this.pages = {
                current:1,
                size:10,
                total:0,
            }
        },
        getList: throttle(async function () {
            this.loading = true
            let params = {
                ...this.searchData,
                pageNo: this.pages.current,
                pageSize: this.pages.size,
                "hzqrdsqrqq": this.redConfirmApplyDate[0],
                "hzqrdsqrqz": this.redConfirmApplyDate[1],
                "lzfpkprqq": this.BlueInvoiceDate[0],
                "lzfpkprqz": this.BlueInvoiceDate[1],
            }


            let { data, code, message } = await pageApply(params)
            if (code == 200) {
                this.loading = false
                this.listDetails2 = data.records
                this.pages.total = data.total
                this.pages.current = data.current
                this.pages.size = data.size;
                try {
                    this.$refs.tableRef.$refs.table.setCurrentRow();
                } catch (error) {
                    
                }
            } else {
                this.loading = false
                this.$message({
                    type: 'success',
                    message: message,
                })
            }
        }, 500),

        async uploadSelected() {
           let { data,code,message} =await  checkInfoAndRisk()
            if(code ==200){
                sessionStorage.setItem(
                // 'redApplyInfo',
                'handleDetailInfo',
                    JSON.stringify({
                        activeComNumber: '14',
                        titleInfo: '新增数电红字确认单申请',
                        searchParams: {},
                        busType:  'FLOW_HZQRDSQ',
                        busId:  '',
                    })
                )
                this.addRedConfigDialogShow = true;
                setTimeout(() => {
                    this.$refs.addRedConfigDialogRef.show('add')
                }, 50)
            }else{
                return;
            }



        },
        redVoiceDailogCb(val){
            this.addRedConfigDialogShow = val || false;
            this.getList()
        },

        getHistory() {
            let fphm = '发票hm，不知道是啥'
            this.$refs.previewComp.show(fphm)
        },
        revokeApply() {
            if (!this.selectRow) {
                this.$message.warning('请先勾选一条数据！')
            } else {
                this.$confirm( `您确定要撤回所选择的数据吗？`,'撤销确认').then(data=>{
                    // this.closeDialog()
                    revokeApply({
                        id:this.selectRow.id
                    }).then(({data,code,message})=>{
                        if(code==200){
                            this.$message.success(message);
                            this.getList();
                        }
                    })
                },err=>{
                })
            }
        },
    },
    computed:{
        dateWidth(){
            return this.$store.state.viewWidth > 1200
        }
    },
    components: {
        tableList,
        addRedConfigDialog,
    },
}
</script>
  
  <style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
    box-sizing: border-box;

    .head {
        display: flex;
        height: 18px;
        align-items: center;
        margin-bottom: 4px;
        margin-top: 4px;

        .colCLas {
            width: 4px;
            height: 100%;
            background-color: $allBg;
            margin-right: 12px;
        }

        .info {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }

    .redBG {
        background-color: red;
        border-radius: 10px;
        text-align: center;
        line-height: 150%;
    }

    .bg {
        text-align: center;
    }
}

.gt1200{
    ::v-deep .el-date-editor--datetimerange.el-input__inner{
        width: 100%;
        max-width: 600px;
    }
}
.lt1200{
    ::v-deep .el-date-editor--datetimerange.el-input__inner{
        width: 300px;
    }
}

::v-deep .el-table__fixed-header-wrapper .cell .el-checkbox{
            display: none;
    }
::v-deep .el-form-item--small.el-form-item{
  margin-bottom: 8px;
}


</style>
  